<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />

    <title>Document</title>
</head>

<body>

    <p class="my-p"></p>

    <!-- 
    axios库地址:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址:http://hmajax.itheima.net/api/province

    目标: 使用axios库，获取省份列表数据，展示到页面上 -->
    <script src="../js/axios.min.js"></script>
    <!-- <script>
        axios({
            url: 'http://hmajax.itheima.net/api/province'
        }).then(result => {
            console.log(result.data.list);
            //list: (34) ['北京', '天津', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾', '香港特别行政区', '澳门特别行政区']message: "获取省份成功"
            console.log(result.data.list.join('<br>'));
            // 北京<br>天津<br>河北省<br>山西省<br>内蒙古自治区<br>辽宁省<br>吉林省<br>黑龙江省<br>上海<br>江苏省<br>浙江省<br>安徽省<br>福建省<br>江西省<br>山东省<br>河南省<br>湖北省<br>湖南省<br>广东省<br>广西壮族自治区<br>海南省<br>重庆<br>四川省<br>贵州省<br>云南省<br>西藏自治区<br>陕西省<br>甘肃省<br>青海省<br>宁夏回族自治区<br>新疆维吾尔自治区<br>台湾<br>香港特别行政区<br>澳门特别行政区
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
        })
    </script> -->
    <!-- 获取类别 下面这段代码会引起跨域问题--使用中间件处理就可以了cors> -->
    <script>
        axios({
            url: 'http://60.204.218.206:8080/api/getlisfl'
        }).then(result => {
            console.log(result.data); //对象数组

            let fl = result.data.map(function(obj) {
                // return obj.lbd
                return `<li>${obj.lbd}(${obj.num})</li>`
            })

            console.log(fl);

            document.querySelector('.my-p').innerHTML = fl.join('<br>')

        })
    </script>

    <!-- 将对象数组转换为属性值数组： -->
    <!-- let objects = [{ name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'orange', color: 'orange' }];
let colors = objects.map(function(obj) {
    return obj.color;
});
console.log(colors); // 输出 ["red", "yellow", "orange"] -->


    <!-- let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`) -->







</body>

</html>